<template>
  <div class="container" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="logindiv cursor">
      <h4 class="space-lt text-center logintitle">IDEA-代码</h4>

      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item prop="login_account">
            <el-input v-model="ruleForm.login_account" placeholder="账号" id="inpUser" clearable></el-input>
          </el-form-item>
          <el-form-item prop="login_password">
            <el-input v-model="ruleForm.login_password" type="password" placeholder="密码" id="passwordUser" clearable show-password></el-input>
          </el-form-item>
          <el-form-item prop="yanzhen">
            <el-input v-model="ruleForm.yanzhen" placeholder="验证码" clearable></el-input>
          </el-form-item>
          <div class="code" @click="refreshCode()">
              <s-identify :identifyCode="identifyCode"></s-identify>
            </div>
      </el-form>
      <el-button type="primary" round class="buttonan m-t-20" @click="submitForm('ruleForm')">start</el-button>
    </div>
     <footer>
        <p>湘ICP备18003982号-2</p>
        <p>COPYRIGHT 2020. ALL RIGHTS RESERVED ZZW</p>
        <p>  互联网安全备案号:14970741712</p>
     </footer>
  </div>
</template>

<script>
import SIdentify from "../components/identify"
  export default {
    components:{
        "s-identify":SIdentify,
    },
    data() {
      const validatePass2 = (rule, value, callback) => {
        // const patt = /^(?!bai[0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
        value = value.toUpperCase();
        if (value != this.identifyCode) {
          callback(new Error('请输入正确的验证码！'));
        }else {
          callback();
        }
      };
      return {
        identifyCode: "",//这里记得单独引出在data中，不然会报错，整了我好一会而
        identifyCodes: "1234567890QWERTYUIOPLKJHGFDSAZXCVBNM",
        ruleForm: {
          login_account: '',
          login_password: '',
          yanzhen:''
        },
        rules: {
          login_account: [
            { required: true, message: '请输入账号名称', trigger: 'blur' },
            { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
          ],
          login_password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
          yanzhen: [
            {validator:validatePass2, trigger: 'blur' }
          ]          
        },
        loading: false
      };
     },
    mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  methods: {
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
    },
    submitForm(formName) {
        this.$refs[formName].validate(async valid => {
          if (valid) {
            this.loading = true;
            const res = await this.$http.post('/user_login/Login',{
              "login_account":this.ruleForm.login_account,
              "login_password":this.ruleForm.login_password
            });
            var inpUser=document.getElementById("inpUser").value;
            var passwordUser=document.getElementById("passwordUser").value;
            sessionStorage.setItem(inpUser,passwordUser);
            console.log(res);
            if(res.status == 200){
              this.$message({
                  showClose: true,
                  message: '恭喜你，这是一条成功消息',
                  type: 'success'
                });
                this.$router.push('/home');
                this.loading = false;
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
  }
  }
</script>

<style lang="less">
.container{
  width: 100%;
  height: 652px;
  min-width: 1280px;
  background: url(../assets/img/pg2.jpg);
  background-size: 100% 100%;
}
footer{
  width: 1280px;
  display: flex;
  justify-content: space-around;

  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: #9C7B4D;
  font-size: 10px;
}
.logindiv{
  width: 250px;
  height: 300px;
  padding: 50px 75px;
  background-color:rgba(28, 25, 30, 0.7);
  position: fixed;
  left: 480px;
  top: 100px;
  border-radius: 30px;
}
.logintitle{
  color: #1ECDBE;
}
.buttonan{
  width: 100%;
}

.code {
  width: 114px;
  height: 40px; 
  left: 20px;
  margin-top: 50px;
}
</style>

